<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冠希的个人列表</title>
</head>
<body>
<table border="1">
    <caption>用户列表</caption>
    <tr>
        <td>姓名：</td>
        <td>{{person.name}}</td>
    </tr>
    <tr>
        <td>照片：</td>
        <td><img :src="person.uri" style="width:150px" alt=""></td>
    </tr>
    <tr>
        <td>年龄：</td>
        <td>{{person.age}}</td>
    </tr>
    <tr>
        <td>工作:</td>
        <td>{{person.job}}</td>
    </tr>
    <tr>
        <td>好友:</td>
        <td>
            <ul v-for="name in person.friend">
                <li>{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="button" value="加载数据" v-on:click="f()">
        </td>
    </tr>
</table>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<script>
    let v = new Vue({
        el:"table",
        data:{
            person:{}
        },
        methods:{
            f : function () {
                v.person = {
                    name:"杨亚锥",
                    age:18,
                    job:"模特",
                    friend:["周伟","尼古拉斯赵四","胖虎"],
                    uri:"gs.png"
                }
            }
        }
    });

</script>
<h1>jldfjal</h1>
<h1>ljljf</h1>
</body>
</html>